<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon.png">
    <title>button</title>
    <link rel="stylesheet" href="../scripts/lib/seedsui/seedsui.min.css">
</head>

<body ontouchstart="">
    <header>
        <div class="titlebar">
            <a class="titlebar-button" href="javascript:back()"><i class="icon icon-arrowleft"></i></a>
            <h1 class="titlebar-title">按钮</h1>
        </div>
    </header>
    <article>
        <div class="group">
            <div class="sliver underline">
                <span class="peg"></span>
                <p class="sliver-title">普通按钮</p>
            </div>
            <div style="line-height: 50px;padding: 4px 12px 8px 12px;">
                <button class="button" style="padding:0 8px;">
                    <span>默认</span>
                    <span class="tip">1</span>
                </button>
                <button class="button" style="padding:0 8px;" disabled>
                    <span>禁用</span>
                    <span class="tip">1</span>
                </button>
                <button style="padding:0 8px;" class="button primary">
                    <span>主色</span>
                    <span class="badge">99+</span>
                </button>
                <button style="padding:0 8px;" class="button submit">
                    <i class="icon icon-rdohook"></i>
                    <span>提交</span>
                </button>
                <button style="padding:0 8px;" class="button cancel">
                    <i class="icon icon-rdoclose"></i>
                    <span>取消</span>
                </button>
                <button style="padding:0 8px;" class="button info">
                    <i class="icon icon-rdoinfo"></i>
                    <span>信息</span>
                </button>
                <button style="padding:0 8px;" class="button success">完成</button>
                <button style="padding:0 8px;" class="button warn">警告</button>
                
            </div>
        </div>

        <div class="group">
            <div class="sliver underline">
                <span class="peg"></span>
                <p class="sliver-title">框形按钮</p>
            </div>
            <div style="line-height: 50px;padding: 4px 12px 8px 12px;">
                <button class="button outline" style="padding:0 8px;">
                    <span>默认</span>
                    <span class="tip">1</span>
                </button>
                <button class="button outline" style="padding:0 8px;" disabled>
                    <span>禁用</span>
                    <span class="tip">1</span>
                </button>
                <button style="padding:0 8px;" class="button primary outline">
                    <span>主色</span>
                    <span class="badge">99+</span>
                </button>
                <button style="padding:0 8px;" class="button submit outline">
                    <i class="icon icon-rdohook"></i>
                    <span>提交</span>
                </button>
                <button style="padding:0 8px;" class="button cancel outline">
                    <i class="icon icon-rdoclose"></i>
                    <span>取消</span>
                </button>
                <button style="padding:0 8px;" class="button info outline">
                    <i class="icon icon-rdoinfo"></i>
                    <span>信息</span>
                </button>
                <button style="padding:0 8px;" class="button success outline">完成</button>
                <button style="padding:0 8px;" class="button warn outline">警告</button>
            </div>
        </div>

        <div class="group">
            <div class="sliver underline">
                <span class="peg"></span>
                <p class="sliver-title">白色按钮</p>
            </div>
            <div style="line-height: 50px;padding: 4px 12px 8px 12px;margin-top:10px;" class="bg-primary">
                <a style="padding:0 8px;" class="button white">白色按钮</a>
                <a style="padding:0 8px;" class="button white outline">白色按钮</a>
            </div>
        </div>


        <div class="group">
            <div class="sliver underline">
                <span class="peg"></span>
                <p class="sliver-title">3D按钮</p>
            </div>
            <div style="line-height: 50px;padding: 4px 12px 8px 12px;">
                <a class="button primary shadow" style="padding: 0 8px;">
                    <i class="icon icon-home"></i>
                    <span>按钮</span>
                </a>
                <a class="button primary cancel shadow size32 radiusround">
                    <i class="icon icon-rdoclose"></i>
                </a>
            </div>
        </div>

        <div class="group">
            <div class="sliver underline">
                <span class="peg"></span>
                <p class="sliver-title">色彩标签</p>
            </div>
            <div style="padding: 10px 12px;">
                <span class="mark-info">info</span>
                <span class="mark-success">success</span>
                <span class="mark-cancel">cancel</span>
                <span class="mark-warn">warn</span>
                <span class="mark-disable">disable</span>
                <span class="mark-grayscale">grayscale</span>
            </div>
        </div>

        <div class="group">
            <div class="sliver underline">
                <span class="peg"></span>
                <p class="sliver-title">大按钮</p>
            </div>
            <div style="line-height: 50px;padding: 4px 12px 8px 12px;">
                <a class="radius4 button block" style="margin:8px">按钮</a>
                <a class="radius4 button block submit" style="margin:8px">
                    <i class="icon icon-rdohook"></i>
                    <span>提交</span>
                </a>
                <a class="radius4 button block cancel" style="margin:8px">
                    <i class="icon icon-rdoclose"></i>
                    <span>取消</span>
                </a>
                <a class="radius4 button block info" style="margin:8px">
                    <i class="icon icon-rdoinfo"></i>
                    <span>信息</span>
                </a>
            </div>
        </div>

    </article>
    <script src="../scripts/lib/seedsui/seedsui.min.js"></script>
    <!--Exmobi能力-->
    <!--<script src="../scripts/lib/exmobi/exmobi.js"></script>-->
    <script>
    //定义exmobi返回
    function back(){history.go(-1);}
</script>
</body>
</html>